<template>
	<div class="h">

		<search></search>
		

		<my-scroll>

			<section class="banner" :style="{height: banner_height }">
				<mu-carousel data-mu-loading-color="secondary" v-loading="loadflag.banner">
					<mu-carousel-item v-for="b,l in banner_list">
						<img :src="b.imageUrl"  @click="handlerCarousel(b)">
						<span :class="'bg_'+b.titleColor">{{b.typeTitle}}</span>
					</mu-carousel-item>
				</mu-carousel>
			</section>

			<section class="menu">
				<div class="flex space_between">
					<router-link class="menu-item" to="/fm/personal">
						<mu-avatar color="red" size="52">
							<span class="f-16">FM</span>
						</mu-avatar>
						<p class="f-16 mt-10">私人FM</p>
					</router-link>
					<router-link class="menu-item" to="/recommend/songs">
						<mu-avatar color="red" size="52">
							<span class="f-16">推荐</span>
						</mu-avatar>
						<p class="f-16 mt-10">每日推荐</p>
					</router-link>
					<router-link class="menu-item" to="/sheets/hots">
						<mu-avatar color="red" size="52">
							<span class="f-16">排行</span>
						</mu-avatar>
						<p class="f-16 mt-10">排行榜</p>
					</router-link>
					<router-link class="menu-item" to="/map">
						<mu-avatar color="red" size="52">
							<span class="f-16">Map</span>
						</mu-avatar>
						<p class="f-16 mt-10">网站地图</p>
					</router-link>
				</div>
			</section>

			<section class="recommend">
				<div class="h1-title">推荐歌单</div>
				<div class="recommend-list">
					<mu-grid-list class="gridlist" :padding="_GLOBAL.config.padding/2" data-mu-loading-color="secondary" v-loading="loadflag.playlist">
						<mu-grid-tile v-for="recommend, index in recommend_playlist" :key="index" @click.native="sheets_select(recommend.id)" >
							<div slot="default" class=" img_wrap">
								<img v-lazy="recommend.picUrl" />
								<div class="play_count">
									<span class="headset">
										<mu-icon value="headset"></mu-icon>
										<em>{{ recommend.playCount | _format_count | text_loading}}</em>
									</span>
								</div>
							</div>
							<span slot="title" class="f-12 text_left">{{ recommend.name | text_loading}}</span>
							<span slot="subTitle" class="f-12 text_left primary">by <b class="white">{{ recommend.copywriter | text_loading }}</b></span>
							<mu-button slot="action" icon @click.stop="sheets_play(recommend.id)">
								<mu-icon value="play_circle_outline"></mu-icon>
							</mu-button>
						</mu-grid-tile>
					</mu-grid-list>
				</div>
			</section>

			<section class="new-song">
				<div class="h1-title">最新音乐</div>
				<div class="recommend-list">
					<mu-grid-list class="gridlist" :padding="_GLOBAL.config.padding/2" data-mu-loading-color="secondary" v-loading="loadflag.newsong">
						<mu-grid-tile v-for="newsong, index in recommend_newsong" :key="index" @click.native="sheets_select(newsong.id)" >
							<div slot="default" class=" img_wrap">
								<img v-lazy="'song' in newsong ? newsong.song.album.picUrl : ''" />
								<div class="play_count">
									<span class="headset">
										<mu-icon value="headset"></mu-icon>
										<em>{{ newsong.playcount | _format_count | text_loading}}</em>
									</span>
								</div>
							</div>
							<span slot="title" class="f-12 text_left">{{ newsong.name | text_loading}}</span>
							<span slot="subTitle" class="f-12 text_left primary">by <b class="white">{{ newsong.song['artists'][0].name | text_loading }}</b></span>
							<mu-button slot="action" icon @click.stop="_player_sheets(newsong.id)">
								<mu-icon value="play_circle_outline"></mu-icon>
							</mu-button>
						</mu-grid-tile>
					</mu-grid-list>
				</div>
			</section>


			<!-- <router-link :to="r.children ? '' : r.path " class="mr-5" v-for="r,index in my_routers" :key="index">
				{{r.name}}
				<div v-if="r.children" class="mb-15 mt-5">
					<router-link :to="c.children ? '' : r.path+'/'+c.path" class="mr-5" v-for="c,key in r.children" :key="key" v-show="!c.children">
						{{ c.name }}
					</router-link>
				</div>

			</router-link> -->

		</my-scroll>
		<!-- <router-link to="/sheets/details">details</router-link> -->

	</div>
</template>

<script>
  	import Search from '@/components/Search/Index';

	const BANNER_WIDTH = 1080,BANNER_HEIGHT = 400;
	export default{
		name: "MyPlayerIndex",
		data(){
			return {
				my_routers:[],
				banner_list:[],
				recommend_playlist: [],
				recommend_newsong:[],

				screenWidth: document.body.clientWidth,
				loadflag:{
					banner: false,
					playlist: false,
					newsong: false,
				}

			}
		},
		created(){
			this.my_routers = this.$router.options.routes;
			this._get_banner();
			this._get_recommend_playlist();
			this._get_recommend_newsong();
		},
		mounted(){

			window.onresize = () => {
				return (() => {
					this.screenWidth = document.body.clientWidth;
				})()
			}
		},
		computed:{
			banner_height(){
				this.screenWidth = window.screenWidth = document.body.clientWidth;
				return ((this.screenWidth * BANNER_HEIGHT) / BANNER_WIDTH)+'px';
			}
		},
		watch:{

		},
		methods:{
			_get_banner(){
				this.loadflag.banner = true;
				this.$api.get(this.ApiPath.banner,{},success=>{
					this.banner_list = success.data.banners;
					this.$nextTick(()=>{
						this.loadflag.banner = false;
					})
				})
			},
			_get_recommend_playlist(){
				this.loadflag.playlist = true;
				this.$api.get(this.ApiPath.personalized.playlist,{},success=>{
					success.data.result.map((res,key)=>{
						if(key < 6){
							this.recommend_playlist.push(res)
						}
					})
					this.$nextTick(()=>{
						this.loadflag.playlist = false;
					})
				})
			},
			_get_recommend_newsong(){
				this.loadflag.newsong = true;
				this.$api.get(this.ApiPath.personalized.newsong,{},success=>{
					success.data.result.map((res,key)=>{
						if(key < 6){
							this.recommend_newsong.push(res)
						}
					})
					this.$nextTick(()=>{
						this.loadflag.newsong = false;
					})
				})
			},
			handlerCarousel(carousel){
				if(carousel.url){
					this.$router.push(carousel.url);
					return;
				}
				this.$api.get(this.ApiPath.song.detail,{
					ids: carousel.encodeId
				},success=>{
					var _data = success.data,_flag=true;
					_data.privileges.map(res=>{
						if(res.st == '-100') {
							this.$alert(this._GLOBAL.msg.ST_100_ERROR); 
							_flag = false;
							return;
						}
					})
					if(!_flag) return _flag;

					this.$nextTick(()=>{
						// console.log(_data)
						this.$store.commit('_set_current_music_play' , { id : _data.songs[0].al.id, name: _data.songs[0].al.name , desc: song + '-' + _data.songs[0].al.name , thumb: _data.songs[0].al.picUrl})
					})
				})
			},
			
		},
		filters:{
			
		},
		components:{ 
			Search
		}

	}
</script>

<style lang="scss" scoped>
@import '@/style/base/_color.scss';


.banner{
	/*background: $red;*/
	/*height: 180px;*/
	/*padding: 30px 0 0 0;*/
	/*margin: 0 0 30px 0;*/
	overflow: visible;
	position: relative;
}
.mu-carousel{
	width: 100%;
	/*position: absolute;*/
	/*left: 5%;*/
	height: 100%;
	/*padding-top: 30px;*/
	/*height: 180px;*/
	.mu-carousel-item{
		>img{
			width: 100%;
		}
		>span{
			position: absolute;
			left: 0;
			bottom: 0;
			border-radius: 0 5px 0 0;
			z-index: 3;
			font-size: 12px;
			padding: 2px 8px 2px 10px;
			color: white;
			letter-spacing: 2px;
			background-color: $red;
			&:after{
				content: '';
				display: block;
				position: absolute;
				bottom: 0px;
				right: -3px;
				border-width: 3px;
				border-style: solid;
				border-color: transparent;
				border-left-color: red;
				border-bottom-color: red;
			}
			&.bg_red{
				&:after{
					border-left-color: $red;
					border-bottom-color: $red;
				}
			}
			&.bg_blue{
				&:after{
					border-left-color: $blue;
					border-bottom-color: $blue;
				}
			}
		}
	}
	/deep/ .mu-carousel-indicators{
		height: 20px;
		bottom: 5px;
		.mu-carousel-indicator-button{
			height: 10px;
			width: 10px;
			margin: 0 3px;
			.mu-carousel-indicator-icon{
				width: 6px;
				height: 6px;
			}
			&.mu-carousel-indicator-button__active {
				.mu-carousel-indicator-icon{
					background-color: $red;
				}
			}
		}
	}
}

.recommend-list{
	position: relative;
	min-height: 120px
}
.recommend,.new-song{
	padding: 5px;
}

.menu{
	padding: 20px 0 10px;
}
.menu-item{
	flex: 1;
}

.scroll_wrap{
	height: calc(100% - 56px)!important;
}
</style>